<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单项标签demo</title>
</head>
<body>
<!--定义表单标签，action指定URL，method指定发送数据的方式(通常选post，更安全)-->
<form action="#" method="post">
    <!--hidden表示隐藏的输入字段，如不需要客户输入的表格主键数据uid-->
    <input type="hidden" name="uid" value="001">
    <!--label定义input元素的标注：当鼠标点击用户名时，自动跳转到对应的输入框
        需要定义for属性指向input标签的唯一标识(id)-->
    <label for="username">用户名：</label>
    <!--text为type属性默认值，表示单行输入
        id属性定义标签的唯一标识-->
    <input type="text" name="username" id="username"> <br>
    <label for="username">密码：</label>
    <!--password属性值为表示输入的内容为密文-->
    <input type="password" name="password" id="password"> <br>
    性别：
    <!--radio属性值表示单选按钮
        单选按钮需要达到互斥效果：给每一个单选按钮的name属性定义相同的属性值
        定义value属性将value的属性值作为对应name的值传递给客户端，如果不定义value，不管选择哪个按钮都会传递on-->
    <input type="radio" name="gender" value="1" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female">
    <label for="female">女</label>   <br>
    爱好：
    <!--checkbox属性值表示复选框-->
    <input type="checkbox" name="hobbies" value="1" id="tour">
    <label for="tour">旅游</label>
    <input type="checkbox" name="hobbies" value="2" id="movie">
    <label for="movie">电影</label>
    <input type="checkbox" name="hobbies" value="3" id="game">
    <label for="game">游戏</label>    <br>
    头像：
    <!--file属性值表示上传文件-->
    <input type="file" name="head"> <br>
    城市：
    <!--select标签定义下拉列表-->
    <select name="city">
        <!--option标签定义可选项，
                定义value属性后提交value属性值，否则提交标签体内容-->
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
        <option value="shenzhen">深圳</option>
    </select>   <br>
    <label for="description">个人描述：</label>
    <!--textarea标签表示一个可以输入多行文本的文本框
            cols属性表示每行字符最大个数，rows属性表示可输入行数-->
    <textarea cols="20" rows="5" name="description" id="description"></textarea>   <br>
    <!--submit值表示提交按钮(默认显示"提交")，会将表单数据发送到服务器，与value属性配合可以更改按钮显示的文字-->
    <input type="submit" value="快速注册">
    <!--reset属性值表示重置，会清除表单中所有数据-->
    <input type="reset" value="重置信息">
    <!--button表示可点击按钮，与JavaScript配合使用产生一些点击的效果-->
    <input type="button" value="一个按钮">

</form>
</body>
</html>